<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body style="padding: 10px;">
<div class="layui-row">
    <div class="layui-input-inline layui-col-md5">
        <input type="text" name="searchInput" class="layui-input" placeholder="...">
    </div>
    <div class="layui-input-inline layui-col-md1" style="width: 60px;">
        <select name="searchType" class="layui-select">
            <option value="1">名称</option>
        </select>
    </div>
    <div class="layui-input-inline layui-col-md1">
        <button class="layui-btn" name="search">搜索</button>
    </div>
</div>
<table id="medExamineItemTable" lay-filter="medExamineItemTable"></table>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["jquery", "table", "laytpl", "form"], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let laytpl = layui.laytpl;
        let form = layui.form;

        let medExamineItemTable = table.render({
            elem: "#medExamineItemTable",
            id: "medExamineItemTableId",
            url: "/getMedExamineItems",
            page: true,
            limit: 5,
            limits: [5, 10, 15],
            method: "post",
            size: "sm",
            toolbar: true,
            toolbar: "#toobarTemplet", //表格头部工具栏模板
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg",
            },
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left", align: "center"},
                    {field: "examineItemId", hide: true},
                    {field: "examineName", title: "检查名称", width: 150, align: "center"},
                    {field: "applyRange", title: "适用范围", width: 160, align: "center",},
                    {field: "applySex", title: "适用性别", width: 150, align: "center"},
                    {field: "price", title: "价格（￥）", width: 150, align: "center"},
                    {field: "fillStatus", title: "检查条目", width: 150, align: "center", templet: "#filledStatusTple"},
                    {title: "操作", fixed: "right", templet: "#operateTemplete", align: "center"}
                ]
            ]
        });

        table.on("toolbar(medExamineItemTable)", function (obj) {

            switch (obj.event) {
                case "batchDelete":
                    batchDelete();
                    break;
                case "addRadItem":
                    addRadItem();
                    break;
            }
            ;
        });

        function batchDelete() {
            layer.msg("批量删除");
        }

        function addRadItem() {
            layer.open({
                title: "添加项目",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/addMedExamineItem",
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    medExamineItemTable.reload();
                },
            });
        }

        table.on("tool(medExamineItemTable)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "deleteRadItem":
                    deleteRadItem(data);
                    break;
                case "show":
                    show(data);
                    break;
                case "add":
                    add(data);
                    break;
            }
        });

        function edit(data) {
            layer.msg("编辑" + data.examineName);
        }

        function deleteRadItem(data) {
            layer.confirm("确定要删除项目‘<span style='color:red'>" + data.examineName+ "’</span>吗？",
                {
                    title: "提示",
                    icon: 3,
                    btnAlign: 'c',
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        $.ajax({
                            url: "/deleteMedItemById",
                            data: "examineItemId=" + data.examineItemId,
                            dataType: "json",
                            type: "post",
                            success: function (responseResult) {
                                let iconNum;
                                if (responseResult.code == 1) {
                                    iconNum = 1;
                                } else {
                                    iconNum = 2;
                                }
                                layer.msg(responseResult.msg, {
                                    time: 1500,
                                    icon: iconNum,
                                });
                                medExamineItemTable.reload();
                            },
                            error: function () {
                                layer.msg("服务器错误！", {
                                    icon: 2,
                                    time: 1500,
                                });
                            }
                        });
                    },
                });
        };

        function show(data){
            layer.msg("查看" + data.examineName);
        }

        function add(data){
            layer.msg("添加" + data.examineName);
        }

        $("button[name=search]").on("click", function () {
            // let searchInput = $("input[name=searchInput]").val();
            // let searchType = $("select[name=searchType]").val();
            // let pageStatus;
            // if (searchInput == "")
            //     pageStatus = true;
            // else
            //     pageStatus = false;
            // console.log(searchType + "\t" + searchInput);
            // table.reload("medExamineItemTableId", {
            //     url: "",
            //     page: {
            //         curr: 1
            //     },
            //     page: pageStatus,
            //     where: {
            //         searchInput: searchInput,
            //         searchType: searchType
            //     },
            //     method: "post"
            // });

        });
    });
</script>
<script type="text/html" id="toobarTemplet">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addRadItem">添加项目</button>
    </div>
</script>
<script type="text/html" id="operateTemplete">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-primary layui-btn-xs" lay-event="show"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        <span class="layui-btn layui-btn-xs" lay-event="add"
              style="padding-right: 5px;margin-right: 5px">添加</span>
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteRadItem"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>
<script type="text/html" id="filledStatusTple">
    {{# if(!d.fillStatus){ }}
    <span style="color: red">未添加</span>
    {{# } }}
    {{#　if(d.fillStatus){ }}
    <span style="color: green">已添加</span>
    {{# } }}
</script>
</body>
</html>